<template>
	<w-collapse v-model="collapseVisible" contentHeight="550px" :fullScreen="fullScreen" disabled :showArrow="false" title="任务明细">
		<fx-detials-table
			ref="detailsTable"
      :canAdd="false"
			:canDelete="false"
			:disabled="false"
			:tableColumn="tableColumn"
			:tableData="tableDetails"
			:tableEditColumnProp="tableEditColumnProp"
			:mainId="stationTaskDetails.id"
			:fpSaveMain="fSaveMain"
			:fpSaveDetails="fpSaveDetails"
			:searchProps="['materialCode', 'materialName']"
			@on-details-refresh="onDetailsRefresh"
		>
		</fx-detials-table>
		<BOMDetail ref="BOMDetail"></BOMDetail>
		<SOPView ref="SOPView" :pdfSrc="pdfSrc" :pdfUrl="pdfUrl"></SOPView>
	</w-collapse>
</template>
<script>
import BOMDetail from './BOMDetail.vue'
import SOPView from './SOPView.vue'
const EDIT_INPUT_TYPE = ['planStartDate', 'remark']
export default {
	name: 'detailsInfo',
	components: {
		BOMDetail,
		SOPView
	},
	props: {
		fullScreen: Boolean,
		stationTaskDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		tableDetails: {
			type: Array,
			default: () => {
				return []
			}
		},
		fSaveMain: Function,
		disabled: Boolean
	},
	data () {
		return {
			collapseVisible: true,
			tableColumn: [
				{
					prop: 'materialCode',
					label: '产品编码',
					width: '150px',
					required: true
				},
				{ prop: 'materialName', label: '产品名称', width: '150px' },
				{
					prop: 'busUnit',
					label: '单位',
					width: '150px',
					required: true
				},
				{
					prop: 'planTotal',
					label: '计划产量',
					width: '100px',
					required: true
				},
				{
					prop: 'actualTotal',
					label: '实际产量',
					width: '100px',
					required: true
				},
				{
					prop: 'procedureName',
					label: '工序',
					width: '100px',
					showOverflowTooltip: true,
					required: true
				},
				{
					prop: 'workStr',
					label: '工序标准时间',
					width: '100px',
					required: true
				},
				{
					prop: 'sop',
					label: '工序SOP',
					width: '100px',
					align: 'center',
					fxRender: this.SOPRender
				},
				{
					prop: 'planStartDate',
					label: '工序计划开始时间',
					width: '150px',
					fxRender: this.planStartDateRender,
					click: this.onCellClick('planStartDate')
				},
				{
					prop: 'planEndDate',
					label: '工序计划结束时间',
					width: '150px'
				},
				{
					prop: 'actualStartDate',
					label: '工序实际开始时间',
					width: '150px'
				},
				{
					prop: 'actualEndDate',
					label: '工序实际结束时间',
					width: '150px'
				},
				{
					prop: 'BOM',
					label: 'BOM',
					width: '110px',
					required: true,
					align: 'center',
					fxRender: this.BOMRender
				},
				{
					prop: 'remark',
					label: '备注',
					width: '150px',
					required: true,
					fxRender: this.reamrkRender,
					click: this.onCellClick('remark')
				}
			],
			tableEditColumnProp: EDIT_INPUT_TYPE,
			pdfSrc: '',
			pdfUrl: ''
		}
	},
	methods: {
		onDetailsRefresh () {
			this.$emit('on-details-refresh')
		},
		// 计划开始时间
		planStartDateRender (h, { row, $index }) {
			h = this.$createElement
			return <fx-list-cell-date
				ref={`planStartDate-${$index}`}
				vModel={row.planStartDate}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				columnProp='planStartDate'
				cellText={this.formatterDate(row, 'planStartDate')}
				vOn:on-change={this.planStartDateChange}
			>
			</fx-list-cell-date>
		},
		planStartDateChange (item, row) {
			let totalSecond = 0
			// 小时
			if (row.timeUnit === 1) {
				totalSecond += this.$fxUtils.h2ms(row.workTimeCount)
			}
			// 分钟
			if (row.timeUnit === 2) {
				totalSecond += this.$fxUtils.m2ms(row.workTimeCount)
			}
			// 天
			if (row.timeUnit === 3) {
				totalSecond += this.$fxUtils.d2ms(row.workTimeCount)
			}
			row.totalSecond = totalSecond
			const endTime = new Date(row.planStartDate).getTime() + totalSecond
			row.planEndDate = this.$fxUtils.setDateTime(new Date(endTime), '时分')
		},
		formatterDate (row, prop) {
			if (row[prop]) {
				return this.$fxUtils.setDateTime(new Date(new Date(row[prop]).getTime()), 'noSecond')
			}
		},
		// 备注
		reamrkRender (h, { row, $index }) {
			h = this.$createElement
			return <fx-list-cell-input
				ref={`remark-${$index}`}
				vModel={row.remark}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				placeholder='请输入备注'
				columnProp='remark'
			>
			</fx-list-cell-input>
		},
		onCellClick (type) {
			return (row) => {
				this.$refs.detailsTable.setRowEdit(row, type)
			}
		},
		checkDetailsUnSaving () {
			return this.$refs.detailsTable.checkDetailsUnSaving()
		},
		fpSaveDetails (detail) {
			// detail.id = this.processTaskDetails.id
			return this.onSaveDetailsHandler(detail)
		},
		onSaveDetailsHandler (params) {
			const { id,	planStartDate, planEndDate, remark } = params
			const filterParam = {
				id,
				planStartDate,
				planEndDate,
				remark
			}
			return this.$fxApi('schedule.updateStationTaskDetail')({ data: filterParam }).then(res => {
				return Promise.resolve(res)
			})
		},
		BOMRender (h, { row }) {
			return <w-icon
				slot='icon-slot' type='bom-icon'
				size="mini"
				rowInfo={row}
				vOn:click={this.viewBOM}
			></w-icon>
		},
		SOPRender (h, { row }) {
			return <w-icon
				slot='icon-slot' type='sop-icon'
				size="mini"
				rowInfo={row}
				vOn:click={this.viewSOP}
			></w-icon>
		},
		viewBOM (row) {
			this.$refs.BOMDetail.open(row.routingId, row.materialName)
		},
		viewSOP (row) {
			this.$fxApi('schedule.exportSopPdfByRoutingId')({
				query: {
					routingId: row.routingId
				}
			}).then(res => {
				this.pdfSrc = res.byte
				this.pdfUrl = res.url
				this.$refs.SOPView.open(row.routingId, row.materialName)
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
</style>
